<template>
  <div id="middle-main" class="middle-main">
    <keep-alive
      ><component :is="isMessagesPage ? messagesList : friendsList"></component
    ></keep-alive>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import messagesList from "@/components/messages/colMiddle/messagesList.vue";
import friendsList from "@/components/contact/colMiddle/index.vue";
import { useRoute } from "vue-router";

const route = useRoute();

/**
 * 是否为消息页面
 */
let isMessagesPage = ref<boolean>(false);
watchEffect(() => {
  if (route.name === "messages" || route.name === "chatRecord")
    isMessagesPage.value = true;
  else if (route.name === "contact") isMessagesPage.value = false;
});
</script>

<style lang="scss" scoped>
.middle {
  &-main {
    position: relative;
    height: 500px;
    box-sizing: border-box;
    background-color: $bkColorSty;
  }
}
</style>
